<template>
  <div class="register">
    <div class="main-title">
      <div class="back" @click="routerBack()">
        <i class="van-icon van-icon-arrow-left"></i>
      </div>
      Sign Up
    </div>
    <div class="register-body">
      <van-image width="100%" :src="registerInfo" />
    </div>
    <div class="register-form">
      <div class="register-form-tipsBlod">
        Enter Verification Code
      </div>
      <div class="register-form-tips">
        We have sent SMS to:<br />
        046 XXX XX XX
      </div>
      <div class="register-form-item">
        <van-password-input
          :value="code"
          :mask="false"
          :length="4"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
      </div>
      <div class="register-form-btn">
        <van-button round block type="primary" @click="Next" class="btn btn-orange">Sign Up</van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import RegisterInfo from '../../assets/img/signup-guide-03.png'
const route = useRoute()
const router = useRouter()
const registerInfo = RegisterInfo

const name = route.params.name
const phone = route.params.phone
const password = route.params.password
const code = ref('')
const showKeyboard = ref(true)
const errorInfo = ref('')

watch(code, (newVal) => {
  if (newVal.length === 4 && newVal !== '123456') {
    errorInfo.value = '密码错误';
  } else {
    errorInfo.value = '';
  }
});
const routerBack = (() => {
  history.back()
})
const Next = (() => {
  router.push({
      name: 'Login',
    })
})
</script>
<style scoped>
.register {
  display: block;
}
.register-body {
  padding: 0 5vw;
}
.register-form {
  padding: 10px 5vw 0;
}
.register-form-item {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.register-form-item input {
  color: #AC8E71;
}
.register-form-tips {
  font-size: 1em;
  line-height: 26px;
  padding: 3px 0;
  color: #7F4E1D;
}
.register-form-tipsBlod {
  font-size: 1.2em;
  font-weight: bold;
  color: #7F4E1D;
}
.register-form-tips span {
  color: #FF5E00;
}
.register-form-item ::-webkit-input-placeholder {
  color: #AC8E71;
}
.register-form-btn .btn{
  width: 100%;
  border: #FF5E00 1px solid;
  background: #FF5E00;
  color: #FFF;
  font-size: 1em;
  font-weight: bold;
  margin: 10px 0;
}
.van-field {
  border-radius: 5px;
  background: #F3F3F3;
}
.van-field .van-field__value {
  color:#AC8E71;
}
.van-field .van-field__value .van-field__body .van-field__control{
  color:#AC8E71;
}
:root {
  --van-text-color: #AC8E71 !important;
}
</style>
